<template>
    <div class="home">
        <Header v-if="Alone"></Header>
        <el-card class="box-card" style="width: 100%;">
            <h1>我是vue子应用1</h1>
            <p><b>主应用传递过来的数据：</b>{{data.type}}</p>
            <ul style="display: flex;justify-content: flex-start;flex-wrap:wrap">
                <li>
                    <el-button type="primary" plain @click="jampRouter(1)">跳转到主应用基座首页</el-button>
                </li>
                <li>
                    <el-button type="primary" plain @click="jampRouter(2)">跳转到vue子应用路由About页面</el-button>
                </li>
                <li>
                    <el-button type="primary" plain @click="jampRouter(3)">打开当前vue应用一</el-button>
                </li>
                <li>
                    <el-button type="primary" plain @click="jampRouter(4)">打开当前vue应用二</el-button>
                </li>
                <li>
                    <el-button type="primary" plain @click="jampRouter(5)">跳转到vue子应用二</el-button>
                </li>
            </ul>
        </el-card>
        <router-view/>
    </div>
</template>
<script>
    import Header from './../components/Header'

    export default {
        name: 'Home',
        components: {Header},
        data() {
            return {
                data: "",
                Alone: null,
            }
        },
        mounted() {
            if (window.__MICRO_APP_ENVIRONMENT__) {
                this.Alone = false
                console.log('我在微前端环境中')
                this.data = window.microApp.getData() //获取基座数据
                console.log(window.microApp.getData())
            } else {
                this.Alone = true
                console.log('我是独自运行的')
            }
        },
        methods: {
            jampRouter(n) {
                if (n == 1) {
                    window.location.href = 'http://localhost:8080'
                } else if (n == 2) {
                    this.$router.push({path: "/about"})
                } else if (n == 3) {
                    window.open('http://localhost:10110/', '_blank');
                } else if (n == 4) {
                    window.open('http://localhost:10111/', '_blank');
                } else if (n == 5) {
                    window.history.pushState(null, '', '/child/my-page2')
                    // 主动触发一次popstate事件
                    window.dispatchEvent(new PopStateEvent('popstate', {state: null}))
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 480px;
    }

    * {
        list-style: none;
    }

    .el-header {
        padding: 0;
    }


    ul {
        margin: 0;
        padding: 0;

        li {
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

</style>
